import { useEffect, useRef, useState } from 'react';
import { useDispatch } from 'react-redux';
import classNames from 'classnames';

// 自定义组件

// actions
import { delTodo, toggleTodo, updateTodo } from '../store/actions/todos';

export const TodoItem = (props) => {
  const dispatch = useDispatch();

  // 当前todo是否处于编辑状态
  const [showEdit, setShowEdit] = useState(false);

  // 受控组件：1 控制显示 2 控制变化
  const [todoName, setTodoName] = useState(props.text);

  // 创建 ref 准备关联 todo 输入的dom
  const inputRef = useRef(null);

  // 添加 effect
  useEffect(() => {
    // console.log('显示变化了');
    if (showEdit) {
      // 输入框获得焦点
      inputRef.current.focus();
    }
  }, [showEdit]);

  // 按下回车修改任务名称
  const onUpdateTodo = (e, id) => {
    if (e.keyCode !== 13) return;
    if (!todoName.trim()) return;
    // 更新 todo
    dispatch(updateTodo(id, todoName));

    // 设置焦点
    setShowEdit(false);
  };

  // 删除todo事件处理函数
  // const handleDel = (id) => {
  //   // 发action
  //   dispatch(delTodo(id));
  // };

  return (
    // 编辑时，添加类名：editing
    // <li
    //   className={`${props.done ? 'completed' : ''} ${
    //     showEdit ? 'editing' : ''
    //   }`}
    // >
    <li className={classNames({ completed: props.done, editing: showEdit })}>
      <div className="view">
        <input
          className="toggle"
          type="checkbox"
          checked={props.done}
          onChange={() => dispatch(toggleTodo(props.id))}
        />
        <label onDoubleClick={() => setShowEdit(true)}>{props.text}</label>
        <button
          className="destroy"
          // onClick={() => handleDel(props.id)}
          onClick={() => dispatch(delTodo(props.id))}
        ></button>
      </div>
      {/* 焦点失去，隐藏输入框 */}
      <input
        className="edit"
        value={todoName}
        onChange={(e) => setTodoName(e.target.value)}
        ref={inputRef}
        onBlur={() => setShowEdit(false)}
        onKeyDown={(e) => onUpdateTodo(e, props.id)}
      />
    </li>
  );
};
